<template>
  <div>
    <el-drawer
      size="40%"
      title="活动详情"
      :visible.sync="drawFormInline.drawer"
      :direction="direction"
    >
      <div>
        <el-form
          label-width="120px"
          label-position="right"
          style="padding:0 10px;"
          :model="drawFormInline.dranData"
        >
          <el-form-item label="活动编号">
            <span>{{ drawFormInline.dranData.activityNum }}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{ drawFormInline.dranData.createdTime }}</span>
          </el-form-item>
          <el-form-item label="活动状态">
            <span>
              {{
                drawFormInline.dranData.activityStatus
                  | filterName('activity_course_status')
              }}</span
            >
          </el-form-item>
          <el-form-item label="活动名称">
            <span>{{ drawFormInline.dranData.name }}</span>
          </el-form-item>
          <el-form-item label="活动时效">
            {{
              drawFormInline.dranData.activityTimeData.activityTimeType
                | filterName('giving_activity_effectiveness')
            }}
          </el-form-item>
          <el-form-item label="活动时间">
            <span> {{ drawFormInline.dranData.activityStartTime }}</span>
            <span style="padding:0 10px">至</span>
            <span
              v-if="
                drawFormInline.dranData.activityTimeData.activityTimeType ===
                  'LONG_TERM'
              "
            >
              长期有效</span
            >
            <span v-else> {{ drawFormInline.dranData.activityEndTime }}</span>
          </el-form-item>
          <el-form-item label="实际开始时间">
            <span>{{ drawFormInline.dranData.actualStartTime }}</span>
          </el-form-item>
          <el-form-item label="实际结束时间">
            <span v-if="drawFormInline.dranData.actualEndTime">{{
              drawFormInline.dranData.actualEndTime
            }}</span>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="活动类型">
            <span>
              {{
                drawFormInline.dranData.activityType
                  | filterName('activity_course_type')
              }}
            </span>
          </el-form-item>
          <el-form-item label="参与条件">
            <span>{{
              drawFormInline.dranData.conditionData.conditionOfParticipation
                .conditionType | filterName('giving_condition_type')
            }}</span>
            <!-- 看课数量 -->
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'WATCH'
              "
            >
              {{
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionOfWatchData.configDuration || 0
              }}
            </span>
            <!-- 看课时间类型 -->
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'WATCH'
              "
            >
              {{
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionOfWatchData.unit
                  | filterName('giving_course_time_type')
              }}
            </span>
            <!-- 试听时间 -->
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'AUDITION'
              "
            >
              {{
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionOfAuditionData.configDuration || 0
              }}
            </span>
            <!-- 试听时间类型 -->
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'AUDITION'
              "
            >
              {{
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionOfAuditionData.unit
                  | filterName('giving_course_time_type')
              }}
            </span>
            <!-- 提交作业 数量 -->
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'SUBMITTING_ASSIGNMENTS'
              "
            >
              {{
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionOfSubmitAssignmentData.assignmentCount
              }}
            </span>
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'SUBMITTING_ASSIGNMENTS'
              "
            >
              份
            </span>
            <span
              v-if="
                drawFormInline.dranData.conditionData.conditionOfParticipation
                  .conditionType === 'GIFT' //赠送
              "
            >
              赠送
            </span>
          </el-form-item>
          <el-form-item
            label="参与课程"
            v-if="
              drawFormInline.dranData.conditionData.conditionOfParticipation
                .conditionType !== 'GIFT' //赠送
            "
          >
            <el-table
              v-if="drawFormInline.dranData.givingCourseInfosResourceList"
              class="courseInfosResource"
              :data="drawFormInline.dranData.givingCourseInfosResourceList"
            >
              <el-table-column prop="date" label="课程图片" align="center">
                <template slot-scope="scope">
                  <el-image
                    v-if="scope.row.coverImage"
                    fit="contain"
                    :src="scope.row.coverImage"
                  ></el-image>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="id" label="课程编号" align="center">
              </el-table-column>
              <el-table-column prop="type" label="课程类型" align="center">
              </el-table-column>
              <el-table-column prop="title" label="课程名称" align="center">
              </el-table-column>
            </el-table>
            <span v-else> 全部课程</span>
          </el-form-item>
          <el-form-item label="赠送商品">
            <el-table
              :data="drawFormInline.dranData.coursesGoodsDtoList"
              class="courseInfosResource"
            >
              <el-table-column label="商品图片" align="center">
                <span>-</span>
              </el-table-column>
              <el-table-column
                prop="goodsNumber"
                label="商品编号"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="商品类型" align="center">
                <template slot-scope="scope">
                  <div>
                    <span v-if="scope.row.type">{{
                      scope.row.type | filterName('goods_type')
                    }}</span>
                    <span v-else>-</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称"> </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            label="参与用户"
            v-if="$store.state.userType !== 'GIFT'"
          >
            <span>
              {{
                drawFormInline.dranData.activityUserRangeConfig.userRangeType
                  | filterName('activity_course_user_type')
              }}
              - {{ userGrouping }}
            </span>
          </el-form-item>
          <el-form-item v-else label="发放用户">
            <span>
              {{
                drawFormInline.dranData.activityUserRangeConfig.userRangeType
                  | filterName('activity_course_user_type')
              }}
              - {{ userGrouping }}
            </span>
          </el-form-item>
          <el-form-item
            label="活动凭证（图）"
            v-if="
              drawFormInline.dranData.activityVoucher.activityVoucherImages
                .length > 0
            "
          >
            <div class="activityVoucher">
              <el-image
                class="activityVoucherImages"
                v-for="(item, index) of drawFormInline.dranData.activityVoucher
                  .activityVoucherImages"
                :key="index"
                :src="item"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item
            label="活动凭证（文）"
            v-if="
              drawFormInline.dranData.activityVoucher.activityVoucherDescription
            "
          >
            <el-input
              disabled
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="
                drawFormInline.dranData.activityVoucher
                  .activityVoucherDescription
              "
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'

export default {
  props: {
    drawFormInline: {
      default: function() {
        return {
          drawer: false,
          dranData: {}
        }
      }
    }
  },
  data() {
    return {
      direction: 'rtl',
      userGrouping: '' // 用户分组
    }
  },
  created() {},
  mounted() {
    this.getUserGrouping()
  },
  methods: {
    getUserGrouping() {
      this.userGrouping = this.drawFormInline.dranData.activityUserRangeConfig.groupId.map(
        (item) => {
          return item.name
        }
      )
      this.userGrouping = this.userGrouping.join(' , ')
    }
    // drawFormInline() {
    //   this.userGrouping = this.drawFormInline.dranData.activityUserRangeConfig.groupId.map(
    //     (item) => {
    //       return item.name
    //     }
    //   )
    //   console.log(this.userGrouping)
    // }
  }
}
</script>

<style lang="less" scoped>
.activityVoucherImages {
  width: 100px !important;
  height: 100px !important;
  margin-left: 10px !important;
}
.activityVoucher {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow-x: scroll !important;
}
.courseInfosResource {
  height: 300px !important;
  overflow-y: scroll !important;
}
:deep(.el-drawer__header) {
  font-size: 20px;
}
:deep(.el-drawer__body) {
  overflow: scroll;
}
:deep(.el-form-item) {
  margin-bottom: 12px;
}
</style>
